<script lang="ts" setup name="PersonTimeStatistics">
import {onActivated, ref, onDeactivated} from 'vue'
import * as echarts from 'echarts/core'
import {TitleComponent, TooltipComponent, LegendComponent} from 'echarts/components'
import {PieChart} from 'echarts/charts'
import {EChartsOption} from 'echarts'
import {LabelLayout} from 'echarts/features'
import {CanvasRenderer} from 'echarts/renderers'
import {ECharts} from 'echarts/core'

// 按需引入注册组件
echarts.use([TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout])

const echartRef = ref<HTMLElement>()

//echarts实例
let echartsExample: ECharts | null = null

// 配置
const option: EChartsOption = {
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      return `${params.marker}<span style="color: ${params.color}; font-weight: bold">${params.name}</span>\t${10}人次<br>总人次：${10}`
    }
  },
  legend: {
    bottom: '2%',
    left: 'center',
    icon: 'circle',
    itemGap: 40
  },
  series: [
    {
      type: 'pie',
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 3
      },
      data: [
        {value: 1048, name: '男', itemStyle: {color: '#1C9399'}},
        {value: 735, name: '女', itemStyle: {color: '#93CDDD'}}
      ]
    }
  ]
}

/**
 * @description: 重新加载大小
 * @return {*}
 */
const onReset = () => {
  if (echartsExample) {
    echartsExample?.resize()
  }
}

onActivated(() => {
  // 初始化
  if (echartRef.value) {
    echartsExample = echarts.init(echartRef.value)
    echartsExample?.setOption(option)
    echartsExample?.resize()
  }
})

onDeactivated(() => {
  // 销毁
  if (echartsExample) {
    echartsExample?.dispose()
    echartsExample = null
  }
})
defineExpose({onReset})
</script>
<template>
  <div ref="echartRef" class="echart-box" />
</template>
<style lang="less" scoped>
.echart-box {
  width: 100%;
  height: 100%;
}
</style>
